<template>
    <pro-dialog class="modal-box" ref="historicalDom" width="auto" :nopadding="true" title="历史底片库">
        <YsForm label-position="top" :model="dataInfo" inline>
            <YsRow :gutter="26">
                <YsCol span="6">
                    <YsFormItem class="w_100" label="检测时间">
                        <YsRow>
                            <YsDatePicker style="width:100%" size="large" type="daterange" class="pickerborder"
                                placeholder="请选择统计周期" @on-change="handleChange" transfer placement="bottom-start">
                            </YsDatePicker>
                        </YsRow>
                    </YsFormItem>
                </YsCol>
                <YsCol span="6">
                    <YsFormItem class="w_100" label="检测任务">
                        <YsInput size="large" clearable v-model.trim="dataInfo.job_code" placeholder="请输入检测任务编号">
                        </YsInput>
                    </YsFormItem>
                </YsCol>
                <YsCol span="6">
                    <YsFormItem class="w_100" label="材质">
                        <Select size="large" clearable class="select-border" placeholder="请选择材质"
                            v-model="dataInfo.mat_id">
                            <Option v-for="(item, index) in materialInfos" :value="item.id" :key="index">
                                {{ item.mat_name }}
                            </Option>
                        </Select>

                    </YsFormItem>
                </YsCol>
                <YsCol span="6">
                    <YsFormItem class="w_100" label="设备类型">
                        <Select size="large" clearable class="select-border" placeholder="请选择设备类型"
                            v-model="dataInfo.part_id">
                            <Option v-for="(item, index) in partInfos" :value="item.id" :key="index">{{ item.ep_name }}
                            </Option>
                        </Select>
                    </YsFormItem>
                </YsCol>
                <YsCol span="6">
                    <YsFormItem class="w_100" label="项目" prop="project_id">
                        <Select size="large" clearable class="select-border" v-model="dataInfo.pd_code">
                            <Option v-for="(item, index) in projectInfos" :value="item.id" :key="index"
                                :label="item.pd_name">
                            </Option>
                        </Select>
                    </YsFormItem>
                </YsCol>
                <YsCol span="6">
                    <YsFormItem class="w_100" label="设备">
                        <YsInput size="large" clearable v-model.trim="dataInfo.device_no" placeholder="请输入设备号">
                        </YsInput>
                    </YsFormItem>
                </YsCol>
                <YsCol span="6">
                    <YsFormItem class="w_100" label="焊口">
                        <YsInput size="large" clearable v-model.trim="dataInfo.weld_no" placeholder="请输入焊口号"></YsInput>
                    </YsFormItem>
                </YsCol>
                <YsCol span="6">
                    <YsFormItem class="w_100" label="底片">
                        <YsInput size="large" clearable v-model.trim="dataInfo.file_name" placeholder="请输入底片名称">
                        </YsInput>
                    </YsFormItem>
                </YsCol>
            </YsRow>
        </YsForm>
        <template>
            <div class="contanttitle">
                <label class="text_01">底片列表</label>
                <div class="contantIcon" @click="queryingNegativeList">
                    <span class="icon iconfont icon-chaxun"></span>
                </div>
            </div>
            <div class="contantmodal border_style">
                <template v-if="fileLibraryInfos.length !== 0">
                    <YsSpin fix v-if="loading_show">
                        <YsIcon type="ios-loading" size=18 class="demo-spin-icon-load"></YsIcon>
                        <div>加载中...</div>
                    </YsSpin>
                    <YsRow class="contant-scrollb" :gutter="8">
                        <YsCol style="float: left;width: 20%;" v-for="(item, index) in fileLibraryInfos" :key="index">
                            <div class="modal-item border_style" @click="setCheckbox(item, index)">
                                <div class="modal-img">
                                    <YsCheckbox v-model="item.single"><span>{{ item.job_code ? item.job_code : '--'
                                    }}</span>
                                    </YsCheckbox>
                                    <img :src="item.file_url ? imgurl(item.file_url) : ''" :onerror="onErrorImg()">
                                    <div class="modal-text">
                                        {{ item.file_name ? item.file_name : '--' }}
                                    </div>
                                </div>
                            </div>
                        </YsCol>
                    </YsRow>
                    <div class="pageData">
                        <div class="pageleft">
                            <YsCheckbox v-model="singleAll" @on-change="handleCheckAll">全选</YsCheckbox>
                        </div>
                        <div class="pageRight">
                            <div class="records text_01">
                                共{{ dataInfo.total }}条
                            </div>
                            <YsPage @on-change="pageModalChange" :page-size="dataInfo.limit_recd"
                                :current="dataInfo.start_recd" :total="dataInfo.total" class="pagePallion"></YsPage>
                        </div>
                    </div>
                </template>
                <template v-else>
                    <div class="default-box">
                        <img class="default-img" src="../../../assets/images/noData.png" alt="">
                        <p class="text_01">暂无历史底片</p>
                    </div>
                </template>
            </div>
        </template>

        <YsRow class="foot-btn">
            <YsButton class="btn-style" @click="$refs.historicalDom.close()">取消</YsButton>
            <YsButton class="btn-style" @click="handleOk" type="primary">确定</YsButton>
        </YsRow>
    </pro-dialog>
</template>
<script>
import { mapGetters, mapActions } from "vuex";

export default {
    name: 'historicalPhotograph',
    computed: {
        ...mapGetters(["getCommData"]),
    },
    props: {
        projectInfos: {
            type: Array,
            default: () => {
                return []
            }
        },
        partInfos: {
            type: Array,
            default: () => {
                return []
            }
        },
        materialInfos: {
            type: Array,
            default: () => {
                return []
            }
        },
    },
    data() {
        return {
            singleAll: false,
            dataInfo: {
                detect_start_time: "", //检测开始时间
                detect_end_time: "", //检测结束时间
                job_code: "", //检测任务编号
                mat_id: "", //任务材质ID
                part_id: "", //设备部位ID
                pd_code: "", //项目编号
                device_no: "", //设备号
                weld_no: "", //焊缝编号(焊口)
                file_name: "", //底片名称
                ent_no: "",//企业编号
                start_recd: 1,
                limit_recd: 10,
                total: 0
            },
            loading_show: false,
            curHistorical: [],//被过滤出来的数据
            fileLibraryInfos: [],
        }
    },
    methods: {
        ...mapActions(['getPageEquMaterial', 'generatorSpringJobOfUseFileLibraryAPI', 'getPageEquPart', 'pageSpringQueryFileLibraryAPI']),
        //查询底片列表
        queryingNegativeList() {
            this.loading_show = true
            this.singleAll = false
            this.pageSpringQueryFileLibraryAPI(this.dataInfo).then(res => {
                let { data, msg, scode, status } = res;
                this.loading_show = false
                if (status === 'ok' && data.fileLibraryInfos.length > 0) {
                    this.fileLibraryInfos = data.fileLibraryInfos.map(v => { return { ...v, single: false } })

                    for (let j = 0; j < this.curHistorical.length; j++) {
                        const newHistorical = this.curHistorical[j];

                        for (let i = 0; i < this.fileLibraryInfos.length; i++) {
                            const newFileLi = this.fileLibraryInfos[i];
                            if (newHistorical.job_code == newFileLi.job_code) {
                                newFileLi.single = true
                            }
                        }
                    }


                    this.dataInfo.total = data.all_recd
                } else {
                    this.fileLibraryInfos = []
                    this.dataInfo.total = 0
                    this.$YsMessage.warning('暂无数据');
                }
            }).catch(err => {
                this.loading_show = false
                this.$YsMessage.error('获取数据失败');
            })
        },
        //打开弹出调用接口
        currentTabChanged() {
            let { ent_no } = this.getCommData;
            this.dataInfo = this.$options.data().dataInfo
            this.dataInfo.ent_no = ent_no
            this.curHistorical = []
            this.fileLibraryInfos = this.$options.data().fileLibraryInfos
            this.modalInfo = this.$options.data().modalInfo
            this.$refs.historicalDom.show()
        },

        //分页
        pageModalChange(page) {
            this.dataInfo.start_recd = page
            this.queryingNegativeList()
        },
        //设置选中内容
        setCheckbox(item, index) {
            item.single = !item.single
            if (item.single) {
                this.curHistorical.push(item)
            } else {
                this.curHistorical.splice(index, 1)
            }
            let flag = this.fileLibraryInfos.every(v => { return v.single == true })
            if (flag) {
                this.singleAll = flag
            } else {
                this.singleAll = flag
            }

            this.filterMethod()
        },
        //全选或者取消全选
        handleCheckAll(flag) {
            this.fileLibraryInfos.map(v => v.single = flag)
            let newHistorical = this.curHistorical.map(t => (t.job_code))
            if (flag) {
                this.fileLibraryInfos.map(t => {
                    if (!newHistorical.includes(t.job_code)) {
                        this.curHistorical.push(t)
                    }
                })
            } else {
                for (var i = this.curHistorical.length - 1; i > -1; i--) {
                    this.curHistorical.splice(i, 1);
                }
            }
            this.filterMethod()
        },
        //过滤出被选中的内数据
        filterMethod() {


        },
        //历史底片库确定按钮
        handleOk() {
            if (this.curHistorical.length > 0) {
                let newData = this.curHistorical.map(v => { return { job_id: v.job_id, file_id: v.file_id } })
                this.generateHistoricalTask(newData)
            } else {
                this.$YsMessage.info("请选择数据");
            }
        },
        //生成历史任务
        generateHistoricalTask(data) {

            this.generatorSpringJobOfUseFileLibraryAPI({ useFileLibraryInfos: data }).then(res => {
                let { data, msg, scode, status } = res;
                if (status === 'ok' && data.createJobBeans.length > 0) {
                    this.$emit("setDistorySlice", data.createJobBeans)
                    this.$refs.historicalDom.close()
                } else {
                    this.$emit("setDistorySlice", [])
                    this.$YsMessage.error('生成任务失败');
                }
            }).catch(err => {
                this.loading_show = false
                this.$YsMessage.error('生成任务失败');
            })
        },
        //报错显示图片
        onErrorImg() {
            return ("this.οnerrοr=null;this.src=" + '"' + require("../../../assets/images/default-01.png") + '";');
        },
        //获取路径
        imgurl(path) {
            return `${window.GlobalConfig.serviceProxy.BaseUrl}` + path
        },
        //设置时间
        handleChange(time) {
            this.dataInfo.detect_start_time = time[0];
            this.dataInfo.detect_end_time = time[1];
        },
    }
}
</script>
  
<style scoped lang='less'>
.default-box {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    // padding: 100px 0;

    height: 466px;

    p {
        margin-top: 10px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 18px;
        color: #333333;
    }

    .default-img {
        width: 184px;
        height: 279px;
    }
}

.modal-box {

    /deep/.ivu-modal {
        // width: 70%;
        width: 1216px;
        min-width: 900px;
        top: 10%;

        .ivu-modal-body {
            padding: 10px 24px 24px;
        }
    }

    .modal-item {
        width: 100%;
        border-radius: 4px;
        border: 1px solid #cfd7e5;
        margin-bottom: 8px;

        .modal-img {
            position: relative;
            height: 189px;

            img {
                width: 100%;
                height: 189px;
            }

            .modal-text {
                height: 48px;
                line-height: 48px;
                position: absolute;
                bottom: 0;
                color: #fff;
                padding: 0 16px;
                font-size: 14px;
                overflow: hidden;
                word-break: keep-all;
                white-space: nowrap;
            }


            /deep/.ivu-checkbox-inner {
                background: transparent !important;
                border-color: #CFD7E5 !important;
            }

            .ivu-checkbox-wrapper {
                position: absolute;
                left: 16px;
                top: 10px;
                z-index: 10;
                margin: 0;

                span {
                    color: #fff;
                }
            }
        }


    }
}

.pageData {
    display: flex;
    align-items: center;
    // padding: 10px 0 0 0;
    width: 100%;

    .pageleft {
        margin-top: 7px;
    }

    .pageRight {
        margin-left: auto;
        display: flex;
        align-items: center;

        .records {
            font-size: 16px;
            margin-right: 16px;
        }

        .pagePallion {}
    }

}

.w_100 {
    width: 100%;
}

/deep/.foot-btn {
    display: flex;
    align-items: center;
    justify-content: right;
    margin-top: 24px;

    .check-right {
        margin-right: 16px;
    }

    .btn-style {
        width: 96px;
        height: 48px;
    }
}

.horizontal-bar {
    display: flex;
    align-items: center;
    height: 40px;
    justify-content: center;
}

.contanttitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;

    label {
        font-size: 16px;
    }

    .contantIcon {
        .icon {
            font-size: 16px;

            &:hover {
                color: #0761FF;
                cursor: pointer;
            }
        }
    }
}

.contantmodal {
    border: 1px solid #fff;
    border-radius: 4px;
    padding: 16px;

    .contant-scrollb {
        // height: 466px;
    }
}
</style>